import '../../../style/outSignRecord.less';
import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { RouteLayout } from 'weaver-mobile-page';
import { Tools } from 'weaver-mobile';
import TitlePage from '../../coms/TitlePage';
import RecordList from '../record/RecordList';
import isEmpty from 'lodash/isEmpty';
const getLabel = Tools.getLabel;

@inject('outSignRecordStore')
@withRouter
@observer
export default class RecordRouteLayout extends Component {
  constructor(props){
    super(props);
    this.state = {
      hasUser: false,
      lastname: ''
    }
  }

  componentDidMount(){
    this.init();
  }

  getResource = () => {
    const {location} = this.props;
    const {state} = location || {};
    const {data} = state || {};
    return data || {};
  }

  init = () => {
    const {outSignRecordStore} = this.props;
    const data = this.getResource();
    if(!isEmpty(data)) {
        outSignRecordStore.queryOutSignRecord(data.id);
        this.setState({hasUser: true, lastname: data.lastnamespan});
    }
  }

  render() {
    const {hasUser, lastname} = this.state;
    if(!hasUser)
      return (
        <RouteLayout>
            <div className='wm-route-layout'>
            </div>
        </RouteLayout>
      )
    
    const {outSignRecordStore: store} = this.props;
    let title = getLabel('504542','{param}的外勤');
    title = title.replace('{param}', lastname); 

    return (
        <RouteLayout>
            <div className='wm-route-layout outSignRecordContainer'>
                <TitlePage title={title}>
                    <RecordList store={store} resourceId={this.getResource().id} style={{top: 0}}/>
                </TitlePage>
            </div>
        </RouteLayout>
    )
  }
}